<template>
    <view class="page">
        <view class="add-box" @tap.stop.prevent="selectAddress" :data-id="item.id" v-for="(item, index) in addressList" :key="index">
            <view class="add-msgbox flexbox-sb">
                <view>
                    <view>
                        <text class="add-name mr-20">{{ item.name }}</text>
                        <text class="add-phone">{{ item.phone }}</text>
                    </view>
                    <view class="address-text">{{ item.province }}{{ item.city }}{{ item.region }}{{ item.detailAddress }}</view>
                </view>
                <view class="centers">
                    <image :data-id="item.id" @tap.stop.prevent="edit" :src="imgUrl + 'add-edit.png'" class="icon-24"></image>
                </view>
            </view>

            <view class="flexbox-sb h-60">
                <view class="centers" @tap.stop.prevent="setDefault" :data-item="item" :data-id="item.id">
                    <view :class="'centers mr-10 iconbox ' + (item.status == 1 ? 'iconbox1' : '')">
                        <image v-if="item.status == 1" class="icon-24" :src="imgUrl + 'step33.png'"></image>
                    </view>
                    <text class="add-del">默认地址</text>
                </view>
                <view class="add-del centers" @tap.stop.prevent="del" :data-id="item.id">删除</view>
            </view>
        </view>
        <view class="addressmanager-add-btn" @tap.stop.prevent="gotoAdd">
            <view class="addressmanager-btn-wrap">
                <image :src="mallimgUrl + 'plus.png'" class="addressmanager-plus"></image>
                <view class="addressmanager-btn-text">新增地址</view>
            </view>
        </view>
    </view>
</template>

<script>
const _request = require('../../utils/request.js');

const app = getApp();
export default {
    data() {
        return {
            addressList: [],
            userId: '',
            mallimgUrl: app.globalData.mallimgUrl,
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            selected: 0,
            //是否是选择地址
            pageNo: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (options.selected) {
            this.setData({
                selected: options.selected
            });
        }

        this.setData({
            userId: uni.getStorageSync('userId')
        });
        this.query();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        console.log('111');
        this.query();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        del(event) {
            const self = this; // if(this.data.addressList.length===1){
            // wx.showToast({
            //   title: '最少需要一条地址',
            //   icon:'none'
            // })
            //   return
            // }

            uni.showModal({
                title: '',
                content: '确定要删除这条地址吗',

                success(res) {
                    if (res.confirm) {
                        self.handleDel(event);
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        //设置默认
        setDefault(e) {
            console.log(e);
            const { addressName, city, cityCode, detailAddress, id, name, phone, province, provinceCode, status, region, regionCode, regionalCode, sendStatus, userId, type } =
                e.currentTarget.dataset.item;

            if (status == 1) {
                return;
            }

            let vm = this;

            _request
                .postObj(
                    '/mall-address/update',
                    {
                        addressName: province + city + region,
                        userId,
                        id,
                        status: 1,
                        name,
                        phone,
                        detailAddress,
                        province,
                        provinceCode,
                        city,
                        cityCode,
                        region,
                        regionCode,
                        type: 2,
                        regionalCode
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        vm.query();
                    } else {
                        uni.showToast({
                            title: res.data.message || '设置失败!',
                            icon: 'none'
                        });
                    }
                });
        },

        handleDel(event) {
            const self = this;
            let address;
            let ids = [event.currentTarget.dataset.id];

            if (uni.getStorageSync('_shopmalladdress')) {
                address = JSON.parse(uni.getStorageSync('_shopmalladdress'));
            }

            _request.postObj('/mall-address/del', ids, app.globalData.mallType).then((res) => {
                if (res.data.code === 200) {
                    //删除本地缓存
                    if (address?.id == event.currentTarget.dataset.id) {
                        uni.setStorageSync('_shopmalladdress', '');
                    }

                    uni.showToast({
                        title: '删除成功',
                        icon: 'none',
                        duration: 2000
                    });
                    let list = self.addressList;
                    let ind = -1;
                    list.forEach((e, index) => {
                        if (e.id == event.currentTarget.dataset.id) {
                            ind = index;
                        }
                    });

                    if (ind > -1) {
                        list.splice(ind, 1);
                        self.setData({
                            addressList: list
                        });
                    }
                } else {
                    uni.showToast({
                        title: res.data.message || '删除失败!',
                        icon: 'none'
                    });
                }
            });
        },

        query() {
            const self = this;

            _request
                .get(
                    '/mall-address/list',
                    {
                        // userId: self.data.userId,
                        offset: this.pageNo
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        self.setData({
                            addressList: res.data.data || []
                        });
                    }
                });
        },

        gotoAdd() {
            uni.navigateTo({
                url: '/shopingmall/addressadd/addressadd?isDefault=' + this.addressList.length
            });
        },

        edit(event) {
            const id = event.currentTarget.dataset.id;
            const list = this.addressList;
            uni.navigateTo({
                url: '/shopingmall/addressadd/addressadd?type=edit&data=' + JSON.stringify(list.filter((e) => e.id == id)[0])
            });
        },

        selectAddress(event) {
            console.log(event);

            if (this.selected == 1) {
                const id = event.currentTarget.dataset.id;
                const list = this.addressList;
                uni.setStorageSync('_shopmalladdress', JSON.stringify(list.filter((e) => e.id == id)[0]));
                uni.navigateBack({
                    delta: 0
                });
            }
        }
    }
};
</script>
<style>
.page {
    padding: 40rpx 20rpx;
    background: #fbfbfb;
}

.add-box {
    width: 710rpx;
    height: 213rpx;
    background: #ffffff;
    box-shadow: 0px 2px 58px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    margin-top: 20rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.add-name {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
}

.add-phone {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #999999;
    margin-top: 10rpx;
}

.address-text {
    font-size: 28rpx;
    width: 600rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 35rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 10rpx;
}

.addressmanager-add-btn {
    width: 80%;
    height: 50rpx;
    border-radius: 50rpx;
    margin: 50rpx auto;
    background-color: #ff8722;
    color: #fff;
    padding: 20rpx 0;
}

.addressmanager-btn-wrap {
    width: 200rpx;
    margin: 0 auto;
}

.addressmanager-plus {
    height: 50rpx;
    width: 50rpx;
    float: left;
}

.addressmanager-btn-text {
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    float: left;
}

.add-del {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 36rpx;
}

.add-msgbox {
    height: 110rpx;
    border-bottom: 1px solid #e8e8e8;
    padding: 20rpx 0;
}

.icon-24 {
    width: 24rpx;
    height: 24rpx;
}

.h-60 {
    height: 60rpx;
    line-height: 60rpx;
}

.iconbox {
    width: 24rpx;
    height: 24rpx;
    border: 1px solid #999999;
    border-radius: 50%;
}

.iconbox1 {
    border: 1px solid #ff8722;
}
</style>
